<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>图片过滤</title>

        <style>
        	body{
        		text-align: center;
				overflow: hidden;
        	}
        </style>
    </head>
    <body >
    	<canvas id="canvas" width="900" height="500">
    		您的浏览器不支持
    	</canvas>
    	<script src="./js/gloomyfishfilter.js"></script>
    	
    	<script type="text/javascript">
    		var canvas = document.getElementById('canvas');
    		canvas.style.border = '1px solid red';
    		var context = canvas.getContext('2d');
    		
    		var img = new Image();
    		img.src = './img/001.jpg';
    		var canvasData ;
    		img.onload = function(){
    			context.drawImage(img, 0, 0);
    			canvasData = context.getImageData(0,0,img.width,img.height);
    		}
    	</script>
    </body>

</html>